<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      td, th {
        border:  1px solid;
        padding: 0px 10px;
      }
      .option {
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
        margin: 0.5em 0;
      }
      .separator {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 1em 0;
      }
      .separator::before,
      .separator::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #000;
      }
      .separator:not(:empty)::before {
        margin-right: .25em;
      }
      .separator:not(:empty)::after {
        margin-left: .25em;
      }
    </style>
  </head>
  <body>
    <h1>Sci-hub X Now!</h1>
    <div class="separator">Settings (hover for descriptions)</div>
    <div class="option">
      <span style="margin-right: 1em;" title="The top level domain for sci-hub.  Since sci-hub mirrors are frequently taken down, you can change this to a working link.  Note: you must include the https:// and trailing /">
        Sci-Hub url:
      </span>
      <input type="text" id="url"/>
      <!-- <button type="button" id="autofetch">Auto-fetch</button> -->
    </div>
    <div class="option">
      <input type="checkbox" id="autodownload"/>
      <span style="margin-left: 0.5em;" title="Automatically downloads the pdf in one click instead of just redirecting to sci-hub.">
        Auto-download pdf's <sup>1</sup>
      </span>
    </div>
    <div class="option">
      <input type="checkbox" id="autoname"/>
      <span style="margin-left: 0.5em;" title="Automatically names downloaded pdf's with the naming convention LastnameYearJournal_shorttitle.pdf.  This setting only applies if Auto-download is turned on.">
        Auto-name downloaded pdf's (beta) <sup>2</sup>
      </span>
    </div>
    <div class="option">
      <input type="checkbox" id="newtab"/>
      <span style="margin-left: 0.5em;" title="Opens sci-hub in a new tab instead of the current tab.  This setting only applies if Auto-download is turned off.">
        Open in new tab
      </span>
    </div>
    <div class="option">
      <input type="checkbox" id="autocheck" checked="true"/>
      <span style="margin-left: 0.5em;" title="Automatically check if the sci-hub mirror is down each time you click the extension">
        Auto-check sci-hub mirror on each paper request
      </span>
    </div>
    <div style="font-size: 6pt; margin-bottom: 1em;">
      <sup>1</sup> requires permissions to manage downloads and access <code>&lt;scihub-url&gt;</code> (to get the pdf link) <br />
      <sup>2</sup> requires permissions to access <code>doi.crossref.org</code> for metadata lookup
    </div>
    <div class="separator">Mirrors</div>
    <div>
      Here is a list of back-up mirrors.
      Click "select" to paste the mirror into the "Sci-hub URL" field above.
    </div>
    <div>
      <table id="links" style="margin: auto;">
        <th style="background-color: whitesmoke;" colspan="2">
          Sci-hub back-up mirrors:
        </th>
      </table>
    </div>
    <div style="clear:both"></div>
    <div style="margin:auto">
      <p style="float:left; width:50px;">Legend: </p>
      <p style="background-color: lightgreen; float:left; text-align: center; width:50px;">working</p>
      <p style="background-color: yellow; float:left; text-align: center; width:80px;">likely working</p>
      <p style="background-color: pink; float:left; text-align: center; width:70px;">not working</p>
      <p style="background-color: #aaa; float:left; text-align: center; width:50px;">loading</p>
    <div style="clear:both"></div>
    <hr />
    <div>
      <p>
        Please consider donating $0.50 via <a target="_blank" rel="noopener noreferrer" href="https://venmo.com/u/sci-hub-x-now"><img width="20" alt="venmo" src="icons/venmo-icon.svg" /></a>.
      </p>
      <p>
        Please visit the <a href="https://github.com/gchenfc/sci-hub-now/issues">github</a> to give feedback.
      </p>
    </div>
  </body>
  <script src="helper_js/permissions-manager.js"></script>
  <script src="options.js"></script>
</html>
